<template>

  <el-form ref="EInfoForm" :model="eBasicInfo" :rules="eBasicInfoRules" label-width="100px" class="demo-ruleForm"
    size="default" status-icon>
    <p class="subCardTitle">基本信息</p>
    <div class="card_avatar">
      <img :src="avatar" class="avatar" title="IWu" />
      <el-upload class="upload-demo" ref="uploadRef" v-model:file-list="fileList"
        action="/api/auth/upAvatar" :data="data" :headers="headers" 
         :on-success="handSuccess" :on-exceed="handExceed" :before-upload="beforeAvatarUpload"
         :auto-upload="false" :limit="1">
        <!-- <template #trigger>
          <el-button type="primary" class="upstateAvatar">修改头像</el-button>
        </template> -->


      </el-upload>
    </div>

    <el-form-item label="公司名称" prop="name" style="margin-top: 20px;">
      <el-input v-model="eBasicInfo.name" style="width: 300px;" readonly />
    </el-form-item>
    <el-form-item label="公司性质" prop="nature"  >
      <el-select v-model="eBasicInfo.nature" disabled  placeholder="请选择" style="width: 300px;">
        <el-option label="国有企业" value="国有企业" />
        <el-option label="集体企业" value="集体企业" />
        <el-option label="私营企业" value="私营企业" />
      </el-select>
    </el-form-item>
    <el-form-item label="公司规模" style="margin-top: 10px;"  >
      <!-- <el-input v-model=" userJobIdens.salaryMax" style="width: 300px;" /> -->
      <el-select v-model="eBasicInfo.sizeMin" clearable style="margin-right: 15px; width: 125px;" disabled  placeholder="请选择">
        <el-option v-for="item in sizeMins" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <span style="font-size: 25px;width: 20px;display: flex;align-items: center;
              justify-content: center;
              align-content: center;">-</span>
      <el-select v-model="eBasicInfo.sizeMax" clearable style="margin-left: 15px; width: 125px;" disabled   placeholder="请选择">
        <el-option v-for="item in sizeMaxs" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="经营行业" prop="industry" style="margin-top: 10px;">
      <el-input v-model="eBasicInfo.industry" style="width: 300px;" readonly/>
    </el-form-item>
    <el-form-item label="公司简介" style="width: 900px; ">
      <el-input v-model="eBasicInfo.content" :autosize="{ minRows: 10, maxRows:20 }" type="textarea"
        placeholder="公司简介..." />
    </el-form-item>


    <el-form-item>
      <el-button style="margin-bottom: 20px;" type="success" @click="saveInfo(EInfoForm)">保存</el-button>
      <el-button style="margin-bottom: 20px;" @click="cancelEdit(EInfoForm)">取消</el-button>
    </el-form-item>
  </el-form>

</template>
<script lang='ts' setup>
import { ref, onMounted, reactive, getCurrentInstance } from "vue"
import { useStore } from "vuex"
import type { FormInstance, FormRules } from 'element-plus'
import { eBasicInfo, eBasicInfoRules } from "@/utills/enterpriseValidators"
import { elmessage, data } from "@/hook/hook"
import { UploadProps, UploadUserFile, UploadInstance, genFileId, UploadRawFile, ElMessage } from 'element-plus'
import { sizeMins, sizeMaxs } from "@/utills/data"
const EInfoForm = ref<FormInstance>()
const store = useStore()
const avatar = ref()
// const avatar = ref()

// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例

// 用户头像上传
const uploadRef = ref<UploadInstance>()
const headers = reactive({
  Authorization: localStorage.getItem("loginData") ? JSON.parse(localStorage.getItem("loginData") || "").token : null,
})


const fileList = ref<UploadUserFile[]>([])


const handExceed: UploadProps['onExceed'] = (files) => {
  uploadRef.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  uploadRef.value!.handleStart(file)
}
const handSuccess: UploadProps['onSuccess'] = (response: any, UploadFile: any, UploadFiles: any) => {
  // 上传成功后将头像更换
  // console.log(UploadFile.raw);
  store.state.enterpriseState.EBasicInfo.EAvatar = window.URL.createObjectURL(UploadFile.raw)
  fileList.value = []

}


const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }


  return true
}

// 提交按钮
const saveInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 更改公司简介
      store.commit("editEInfo")
      store.commit("upEBasicInfo", eBasicInfo)
      // 将头像上传
      uploadRef.value!.submit()

    } else {
      console.log('error submit!', fields)
    }

  })

}
// 取消按钮
const cancelEdit=(formEl: FormInstance | undefined) =>{
  if (!formEl) return
  formEl.resetFields()
  store.commit("editEInfo")
}



onMounted(() => {
  eBasicInfo.name = store.state.enterpriseState.EBusinessInfo.businessName
  eBasicInfo.nature = store.state.enterpriseState.EBasicInfo.ENature
  eBasicInfo.sizeMin = store.state.enterpriseState.EBasicInfo.ESizeMin
  eBasicInfo.sizeMax = store.state.enterpriseState.EBasicInfo.ESizeMax
  eBasicInfo.industry = store.state.enterpriseState.EBasicInfo.EIndustry
  eBasicInfo.content = store.state.enterpriseState.EBasicInfo.EContent
  avatar.value =  store.state.enterpriseState.EBasicInfo.EAvatar

})


</script>
<style scoped>
/* 公司信息 */



.card_avatar {
  position: absolute;
  margin-left: 700px;

}

.demo-ruleForm {
  height: auto;
}

.demo-ruleForm:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}

.subCardTitle {
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  width: calc(100%-30px);
  /* height: 25px; */
  background-color: rgb(234, 242, 253);
  margin-bottom: 10px;
}

.upstateAvatar {
  position: relative;
  z-index: 2;
  height: 24px;
  /* margin-left: 90px; */
}

.avatar {
  border-style:solid ;
  border-width:1px;
  border-color:#8faece;
  margin-bottom: 10px;
  height: 90px;
  width: 90px;
  border-radius: 100%;
  margin-right: 20px;

}
</style>